<template>
  <div id="img-upload">
    <el-upload
      :action="imgUrl"
      :headers="uploadHeaders"
      :show-file-list="imglist"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      class="avatar-uploader">
      <!--      <img v-if="imageUrl" :src="imageUrl" :class="'avatar' + ' ' + imgclass" :style="imgclass">-->
      <el-image
        v-if="imageUrl"
        :class="imgclass"
        :style="imgclass"
        :src="imageUrl"
        class="avatar"
        fit="cover" />
      <i v-else :style="divclass" class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
  </div>
</template>

<script>
import config from '../../common/config'
import store from '../../store'
import msgbox from '../../common/msgbox.js'

export default {
  name: 'ImgUpload',
  props: {
    getimg: { // 获取getimg
      type: String,
      default: ''
    },
    imgclass: { // img的样式
      type: Object,
      default: function() {
        return {}
      }
    },
    divclass: { // div的样式
      type: Object,
      default: function() {
        return {}
      }
    },
    imglist: { // 是否多选
      type: Boolean,
      default: false
    },
    imgNum: { // 图片类型
      type: Number,
      default: 0
    },
    imgSize: {
      type: Number,
      default: 500
    },
    clearImg: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      imgUrl: config.upURI,
      uploadHeaders: {
        Authorization: 'Bearer ' + store.getters.auth('jwt')
      },
      imageUrl: '',
      head_img: ''
    }
  },
  watch: {
    getimg: {
      handler(newName, oldName) {
        this.getmsg()
      },
      immediate: true,
      deep: true
    },
    clearImg: {
      handler(newName, oldName) {
        if (newName === true) {
          this.imageUrl = ''
        }
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    store.dispatch('getAuth')
    this.uploadHeaders.Authorization = 'Bearer ' + store.getters.auth('jwt')
  },
  methods: {
    getmsg() {
      this.imageUrl = this.getimg
    },
    handleAvatarSuccess: function(res, file) {
      if (res.status === 200) {
        this.imageUrl = URL.createObjectURL(file.raw)
        this.setimg(res.memo)
      } else if (file.response.msg === 'Auth_Timeout') {
        this.$message.error('登录超时请重新登录')
      } else {
        const msg = msgbox.get(file.response.msg)
        this.$message.error(msg)
      }
    },
    beforeAvatarUpload: function(file) {
      const isLt2M = file.size / 1024 <= this.imgSize
      const isJPEG = file.type === 'image/jpeg'
      const isJPG = file.type === 'image/jpg'
      const isPNG = file.type === 'image/png'
      const isGIF = file.type === 'image/gif'
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 ' + this.imgSize + 'k!')
      }
      if (!isJPG && !isJPEG && !isPNG && !isGIF) {
        this.$message.error('上传头像图片只能是 JPG/JPEG/PNG/GIF 格式!')
      }
      return isLt2M && (isJPEG || isJPG || isPNG || isGIF)
    },
    setimg(imgMsg) {
      const msg = imgMsg
      msg.type = this.imgNum
      this.$emit('getmsg', msg)
    }
  }
}
</script>

<style lang="scss" scoped>
#img-upload {
  display: inline-block;

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    min-width: 120px;
    min-height: 120px;
    line-height: 120px;
    text-align: center;
    border: 1px dashed #8c939d;
  }

  .avatar {
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: top;
  }
}
</style>
